<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>后台登录</title>
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="/css/common.css">
    <link rel="stylesheet" href="/css/background.css">
    <style>

    </style>
</head>
    <body>
    <div class="main" id="app">
        <!--     登录窗口-->
        <div class="login">
            <div id="LoginImg">
    
            </div>
    
            <el-form ref="form" :model="loginForm" id="loginForm">
                <el-form-item label="管理员用户名">
                    <el-input
                            v-model="loginForm.administratorUsername"
                            autofocus="true"
                    ></el-input>
                </el-form-item>
                <el-form-item label="管理员密码">
                    <el-input
                            v-model="loginForm.administratorPassword"
                            type="password"
                            :show-password="showpassword"
                    ></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onLogin()">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
    </body>
    <script src="/js/vue.js"></script>
    <script src="/js/axios-0.18.0.js"></script>
    <!--    element ui-->
    <!--    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
    <link rel="stylesheet" href="/element-ui/lib/theme-chalk/index.css">
    <script src="/element-ui/lib/index.js"></script>
    <script>
        var v = new Vue({
            el : "#app",
            mounted(){
                
            },
            methods:{
                onLogin() {
                    axios({
                        method: "post",
                        url: "/backgroundLogin",
                        data: this.loginForm
                    })
                        .then((resp)=>{
                        if(resp.data.code === 1){
                            this.$message({
                                message: "登陆成功",
                                type: 'success'
                            });
                            localStorage.setItem('administrator',this.loginForm.administratorUsername)
                            window.location.href = '/backgroundPage'
                            // localStorage.setItem("userInfo",JSON.stringify(resp.data))
                        }else {
                            this.$message({
                                message: resp.data.msg,
                                type: 'warning'
                            });
                        }
                    });
                },
            },
            data(){
                return {
                    //是否登录成功
                    isLogin : false,
                    loginForm : {
                        administratorUsername : "root",
                        administratorPassword : "1234"
                    },
                    showpassword : true
                }
            }
        })
    </script>
</html>